<template>
    <div class="order container">
        <header>
            <i class='iconfont icon-fanhui' @click='$router.back()'></i>
            <span>提交订单</span>
            <i class='iconfont icon-kefu'></i>
        </header>
        <section>
            <div class='path'>
                <h3>收货信息：</h3>
                <div 
                    class='path-content' 
                    v-if='path.name'
                    @click='goPath'
                >
                    <div>
                        <span>{{path.name}}</span>
                        <span>{{path.tel}}</span>
                    </div>
                    <div>
                        <span>{{path.province}}</span>
                        <span>{{path.city}}</span>
                        <span>{{path.county}}</span>
                        <span>{{path.addressDetail}}</span>
                    </div>
                </div>
                <div class='path-content' v-else>
                    <div @click='$router.push("/path")'>去添加地址</div>
                </div>
            </div>
            <div class='payment'>
                <div>支付方式</div>
                <van-radio-group v-model="radioPay">
                  <van-radio name="wxpay">微信支付</van-radio>
                  <van-radio name="alipay">支付宝支付</van-radio>
                </van-radio-group>
            </div>
            <ul class='goods'>
                <li
                    v-for='(item,index) in goodsList'
                    :key='index'
                >
                    <div><img :src="item.goods_imgUrl" alt=""></div>
                    <div>
                        <h4>{{item.goods_name}}</h4>
                        <div>
                            <span>¥{{item.goods_price}}</span>
                            <span>x{{item.goods_num}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <footer>
            <ul>
               <li>
                    <span>共</span>
                    <b>{{total.num}}</b>
                    <span>件，</span>
                    <span>总金额：</span>
                    <b>¥{{total.price}}</b>
                </li>
                <li class='go-order' @click='goPayment'>提交订单</li>
            </ul>
        </footer>
    </div>
</template>

<script>
import http from '@/common/api/request.js'
import { Toast } from 'vant';
import {mapState,mapGetters,mapMutations} from 'vuex'
import qs from 'qs'
import bus from '@/common/bus.js'
export default{
    name : 'Order',
    data () {
        return {
            path:{},
            radioPay:'wxpay',
            total:{
                price:0,
                num:0
            },
            goodsList:[]
        }
    },
    computed:{
        ...mapState({
           list:state=>state.path.list,
           orderId:state=>state.order.orderId,
           checkedList:state=>state.cart.checkedList
        }),
        ...mapGetters(['defaultPath'])
    },
    created(){
        //请求到了地址
        this.getData();
        //请求到了订单
        this.selectOrder();
        //接收传递过来的值
        this.goodsList = JSON.parse(this.$route.query.goodsList);
    },
    activated(){
        bus.$on('selectPath',(data=>{
            this.path = JSON.parse(data);
        }))
    },
    methods:{
        ...mapMutations(['initData','initOrder']),
        getData(){
            http.$axios(  {
            	url:'/api/selectAddress',
                method:"post",
                headers:{
                    token:true
                }
            }).then(res=>{
                this.initData( res.data );
                //有默认收货地址
                if( this.defaultPath.length ){
                    this.path = this.defaultPath[0];
                }else{
                    this.path = res.data[0];
                }
                
                if(  typeof this.$route.params.pathItem == 'string'  ){
                    this.path = JSON.parse(this.$route.params.pathItem);
                }
            })
        },
        //请求查询订单
        selectOrder(){
            http.$axios({
            	url:'/api/selectOrder',
                method:"post",
                headers:{
                    token:true
                },
                data:{
                    orderId:this.orderId
                }
            }).then(res=>{
                if( !res.success ) return;
                let data = res.data[0];
                this.total = {
                    price:data.goods_price,
                    num:data.goods_num
                }
            })
        },
        //跳转到我的地址页
        goPath(){
            this.$router.push({
                path:'/path',
                query:{
                    type:'select'
                }
            })
        },
        //点击提交订单
        goPayment(){
            //判断是否选择了收货地址
            if( !this.path ) return Toast('请选择收货地址');
            
            let newArr = [];
            this.goodsList.forEach(v=>{
                newArr.push( v.goods_name );
            })
            
            let dataOrder = {
                orderId:this.orderId,//订单号
                price:this.total.price,//金额
                name:newArr.join('')//买的哪个商品
            }
            
            //发送请求==》修改订单的状态  && 把购物车指定的数据清空
            http.$axios({
            	url:'/api/submitOrder',
                method:"post",
                headers:{
                    token:true
                },
                data:{
                    orderId:this.orderId,//订单号
                    shopArr:this.checkedList//选中商品的id号
                }
            }).then(res=>{
                if( !res.succees ) return;
                //发送请求==>去支付
                http.$axios({
                	url:'/api/payment',
                    method:'post',
                    headers:{
                        token:true,
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    data:qs.stringify(dataOrder)
                }).then(res=>{
                    //res会返回一个url
                    if( res.succees ){
                        window.location.href = res.url;
                    }
                })
            })
        }
    }
}
</script>

<style lang='scss' scoped>
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.173333rem;
    color:#fff;
    background-color: #b0352f;
    i{
        padding:0 0.4rem;
        font-size:0.586666rem;
    }
    span{
        font-size:0.426666rem;
    }
}
section{
    background-color: #f7f7f7;
    .path{
        font-size:0.426666rem;
        h3{
            padding:0.16rem 0.4rem;
        }
        .path-content{
            padding:0.16rem 0.4rem;
            background-color: #FFFFFF;
            span{
                padding-right:0.16rem;
            }
        }
    }
    .payment{
        margin-top:0.4rem;
        padding:0.16rem 0.4rem;
        font-size:0.426666rem;
        background-color:#FFFFFF;
        .van-radio-group{
            display: flex;
            padding:0.266666rem 0;
        }
    }
    .goods{
        margin-top:0.4rem;  
        background-color: #FFFFFF;
        li{
            display: flex;
            justify-content: space-between;
            padding:0.4rem;
            img{
                width:2.133333rem;
                height: 2.133333rem;
            }
        }
    }
}
footer{
    width: 100%;
    height: 1.28rem;
    border-top:1px solid #ccc;
    ul{
        display: flex;
        justify-content:space-between;
        align-items: center;
        font-size:0.373333rem;
        li:first-child{
            padding-left:0.4rem;
            b{
                font-size:0.48rem;
                color:red;
            }
        }
        .go-order{
            width: 3.2rem;
            line-height: 1.28rem;
            text-align: center;
            color:#fff;
            background-color: red;
        }
    }
}
</style>
